<template>
	<view>
		<template v-if="isMessageImage">
			<view class="shop-message-view">
				<view class="shop-message-title">
					<view style="margin-right: 20rpx;">订单号:</view>
					<view>{{orderInfo.order_sn}}</view>
				</view>
				<view>
					<view class="order-message-view1 padding-30">
						<image class="order-message-image" :src="orderInfo.prize_id?orderInfo.shop.info.img:orderInfo.shop.img" mode=""></image>
						<view class="order-message-right">
							<view class="order-message-title">
								{{orderInfo.prize_id?orderInfo.shop.info.name:orderInfo.shop.name}}
							</view>
							<view class="order-message-desc">
								<!-- {{orderInfo.shop.translate}} -->
							</view>
							<view class="order-message-price">
								<view class="order-price"><text style="font-size: 15px;">￥</text>{{orderInfo.prize_id?orderInfo.shop.info.amount:orderInfo.shop.amount}}
								</view>
								<!-- <view class="order-mu">{{orderInfo.grammage}}g</view> -->
								<!-- <view class="order-btn" @click="$emit('click')">{{orderInfo.benName}}</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="shop-message-title1">
					<view>领取时间: {{orderInfo.create_time}}</view>
					<view style="color: #C52B21;">{{orderInfo.status == 1?'配送中':'待审核'}}</view>
				</view>
			</view>
		</template>
		<template v-else-if="isCoin">
			<view class="shop-message-view">
				<view class="shop-message-title">
					<view style="margin-right: 20rpx;">订单号:</view>
					<view>{{orderInfo.order_sn}}</view>
				</view>
				<view>
					<view class="order-message-view1 padding-30">
						<image class="order-message-image" :src="orderInfo.species.image" mode=""></image>
						<view class="order-message-right">
							<view class="order-message-title">
								{{orderInfo.species.name}}
							</view>
							<view class="order-message-desc">
								<!-- {{orderInfo.shop.translate}} -->
							</view>
							<view class="order-message-price">
								<view class="order-price"><text style="font-size: 15px;">￥</text>{{orderInfo.species.price}}
								</view>
								<!-- <view class="order-mu">{{orderInfo.grammage}}g</view> -->
								<!-- <view class="order-btn" @click="$emit('click')">{{orderInfo.benName}}</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="shop-message-title1">
					<view>领取时间: {{orderInfo.create_time}}</view>
					<view style="color: #C52B21;">{{orderInfo.status == 1?'配送中':'待审核'}}</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="shop-message-view">
				<view class="shop-message-title">
					<view style="margin-right: 20rpx;">订单号:</view>
					<view>{{orderInfo.order_sn}}</view>
				</view>
				<view>
					<view class="order-message-shopTitle">
						<view>{{orderInfo.initial.type == 1? '原始股一期':orderInfo.initial.type==2?'原始股二期':'原始股三期'}}</view>
						<view>认购金额：￥{{orderInfo.amount}}元</view>
					</view>
					<view class="initialShare-item-center">
						<view class="initialShare-shopItem">
							<view style="font-size: 16px;padding-bottom: 10rpx;">
								持股
							</view>
							<view style="font-size: 20px;">
								{{orderInfo.initial.sharehold}}<span style="font-size: 12px;margin-left: 4rpx;">股</span>
							</view>
						</view>
						<view class="initialShare-shopItem">
							<view style="font-size: 16px;padding-bottom: 10rpx;">
								每日收益分红
							</view>
							<view style="font-size: 20px;">
								{{orderInfo.initial.income}}<span style="font-size: 12px;margin-left: 4rpx;">元</span>
							</view>
						</view>
						<view class="initialShare-shopItem">
							<view style="font-size: 16px;padding-bottom: 10rpx;">
								收益周期
							</view>
							<view style="font-size: 20px;">
								{{orderInfo.initial.income_day}}<span style="font-size: 12px;margin-left: 4rpx;">天</span>
							</view>
						</view>
					</view>
				</view>
				<view class="shop-message-title1">
					<view>领取时间: {{orderInfo.create_time}}</view>
					<view style="color: #C52B21;">{{orderInfo.status == 1?'收益中':'待审核'}}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props:{
			orderInfo:Object,
			isMessageImage:Boolean,
			isCoin:Boolean
		},
		data(){
			return{
				titleList:[
					{title:'持股',number:'1296'},
					{title:'每日收益分红',number:'40'},
					{title:'收益周期',number:'160'},
				],
			}
		}
	}
</script>

<style lang="scss">
	.order-message-shopTitle{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
	}
	.initialShare-item-center{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx 30rpx 30rpx;
	    border-bottom: 2rpx solid #EEDFB9;
	}
	.initialShare-shopItem{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.order-message-desc{
		font-size: 12px;
		color: #666666;
		// margin: 20rpx 0;
	}
	.order-btn{
		font-size: 13px;
		color: #ffffff;
		padding: 10rpx 40rpx;
		border-radius: 10rpx;
		background-color: #C52B21;
		letter-spacing: 2px;
	}
	.padding-30{
		padding: 20rpx;
	}
	.paddingx-30{
		padding: 0 30rpx;
	}
	.order-message-view1 {
		display: flex;
		align-items: center;
	    background-color: #FFF0CA;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		.order-message-image {
			width: 138rpx;
			height: 138rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}
		.order-message-right {
			flex: 1;
			// position: relative;
		}
	
		.order-message-title {
			font-size: 15px;
			color: #333333;
			margin-bottom: 10rpx;
		}
	
		.order-message-price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			// position: absolute;
			// bottom: 0;
			// right: 0;
			.order-price {
				font-size: 14px;
				color: #E83434;
			}
	
			.order-mu {
				font-size: 15px;
				color: #666666;
			}
		}
	}
	.shop-message-title1{
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 13px;
		color: #333333;
		border-top:1px solid #F4E5BF;
	}
	.shop-message-title{
		padding: 20rpx;
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #333333;
		border-bottom:1px solid #F4E5BF;
	}
	.shop-message-view{
		background-color: #FFF0CA;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}
</style>